import React from 'react'
import clsx from 'clsx'
import { useContext } from 'react'
import { t } from '/imports/i18n'
import { useDevice } from '../ExcalidrawCore'
import { SidebarPropsContext } from './common'
import { CloseIcon, PinIcon } from '/imports/components/icons'
import { withUpstreamOverride } from '../hoc/withUpstreamOverride'
import { Tooltip } from '../Tooltip'

export const SidebarDockButton = (props: { checked: boolean; onChange?(): void }) => {
  return (
    <div className='layer-ui__sidebar-dock-button' data-testid='sidebar-dock'>
      <Tooltip label={t('labels.sidebarLock')}>
        <label
          className={clsx('ToolIcon ToolIcon__lock ToolIcon_type_floating', 'ToolIcon_size_medium')}
        >
          <input
            className='ToolIcon_type_checkbox'
            type='checkbox'
            onChange={props.onChange}
            checked={props.checked}
            aria-label={t('labels.sidebarLock')}
          />{' '}
          <div
            className={clsx('Sidebar__pin-btn', {
              'Sidebar__pin-btn--pinned': props.checked
            })}
            tabIndex={0}
          >
            {PinIcon}
          </div>{' '}
        </label>{' '}
      </Tooltip>
    </div>
  )
}

const _SidebarHeader: React.FC<{
  children?: React.ReactNode
  className?: string
}> = ({ children, className }) => {
  const device = useDevice()
  const props = useContext(SidebarPropsContext)

  const renderDockButton = !!(device.canDeviceFitSidebar && props.dockable)
  const renderCloseButton = !!props.onClose

  return (
    <div className={clsx('layer-ui__sidebar__header', className)} data-testid='sidebar-header'>
      {children}
      {(renderDockButton || renderCloseButton) && (
        <div className='layer-ui__sidebar__header__buttons'>
          {renderDockButton && (
            <SidebarDockButton
              checked={!!props.docked}
              onChange={() => {
                props.onDock?.(!props.docked)
              }}
            />
          )}
          {renderCloseButton && (
            <button
              data-testid='sidebar-close'
              className='Sidebar__close-btn'
              onClick={props.onClose}
              aria-label={t('buttons.close')}
            >
              {CloseIcon}
            </button>
          )}
        </div>
      )}
    </div>
  )
}

const [Context, Component] = withUpstreamOverride(_SidebarHeader)

/** @private */
export const SidebarHeaderComponents = { Context, Component }
